<template>
  <div class="pages-container">
    <MainHeader />
    
    <div class="aboutOur">
      <div class="introduction" v-html="aboutOur.introduction"></div>
      <div class="contact">
        <p>{{aboutOur.address}}</p>
        <p>{{aboutOur.email}}</p>
        <p>{{aboutOur.tel}}</p>
      </div>
      <div class="hot-product">
        <div class="title">产品推荐</div>
        <div class="list">
          <div class="item" v-for="(item,i) in aboutOur.news" :key="i">
            <img :src="item.imgUrl" :alt="item.title">
            <p>{{item.title}}</p>
          </div>
        </div>
      </div>
    </div>
    <MainFooter />
  </div>
</template>

<script>
export default {
  name: 'AboutOurPage',
  data() {
    return {
      aboutOur: {}
    };
  },
  created() {
    this.asyncData();
  },
  methods: {
    asyncData() {
      this.$axios.get(`/nuxtApiAbout.json`).then((res) => {
        const { data } = res.data
        this.aboutOur = data
      });
    },
  },
}
</script>
<style lang="less" scoped>
.aboutOur{
  padding: 40px 10vw;
  margin: 0 auto;
  .introduction{
    padding-bottom: 60px;
    line-height: 1.8;
    font-size: 21px;
    text-indent: 2em;
  }
  .contact{
    padding-bottom: 50px;
    text-align: right;
  }
  .hot-product{
    .title{
      padding: 30px 0;
      font-size: 21px;
      color: #0a8754;
      font-weight: bold;
    }
    .list{
      display: flex;
      .item{
        position: relative;
        margin-right: 30px;
        cursor: pointer;
        overflow: hidden;
        &:hover{
          p{
            bottom: 0;
          }
          img{
            transform: scale(1.03);
          }
        }
        img{
          display: block;
          transition: all 0.3s;
        }
        p{
          position: absolute;
          bottom: -100%;
          width: 100%;
          color: #fff;
          padding: 20px 12px;
          box-sizing: border-box;
          background: rgba(0,0,0,.5);
          transition: all 0.3s;
        }
      }
    }
  }
}
</style>
